<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
<link rel="stylesheet" href="../includes/styleBase/css/styleBase.css" />
<link rel="stylesheet" href="../includes/styleBase/css/ostable.css" />
<script type="text/javascript" src="../includes/styleBase/js/jquery.js"></script>
<script type="text/javascript" src="../includes/styleBase/js/style.js"></script>
<script type="text/javascript" src="../includes/lhgdialog/lhgcore.min.js"></script>
<script type="text/javascript" src="../includes/lhgdialog/lhgdialog.js"></script>

<style>
	.trHeightTable img{
		margin:5px;
	}
</style>
<script>
	function popUp(type){
		if(type==0){
			J('#normal').dialog({ title: 'HTML内容', cover:true, rang: true, html: '<div class=infoArea>弹出窗口内容与边框之间应该有边距，参照infoArea这个样式,弹出窗口要尽量加上遮罩，如果不影响业务的话</div>' }); 
		}else if(type==1){
			J('#link').dialog({ id: 'd1', title: '弹出窗口示例——html页面', cover:true,page: 'demo/内容页面.html', link: true, btns: false, width: 700, height: 400 }); 
		}else if(type==2){
			J('#table').dialog({ id: 'd1', title: '弹出窗口示例——表格查询页面', cover:true,page: 'demo/表格内容.html', link: true, btns: false, width: 700, height: 450 }); 
		}else if(type==3){
			J('#tab').dialog({ id: 'd1', title: '弹出窗口示例——表格查询页面', cover:true,page: 'demo/弹出标签页.html', link: true, btns: false, width: 700, height: 455 }); 	
		}
	}
</script>
</head>
<body>
<div class="titleDiv">
    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="text-align:left;">
        <tr>
            <td class="box_top_left">&nbsp;</td>
            <td class="box_top_center">各种弹出示例</td>
            <td class="box_top_right">&nbsp;</td>
        </tr>
    </table>
</div>
<div class="contentBox">
    <div class="infoArea" style="height:400px;">
    	<div class="tip">各种弹出页面示例，弹出窗口内内容记得注意边距。别贴着边框，哈哈,弹出窗口详细用法详解lhgdialog示例</div>
    	<table cellpadding="0" cellspacing="0" border="0" class="trHeightTable">
        	<tr>
            	<td colspan="4">建议弹出框的按钮不要用弹出框架自身的按钮，这样不方便控制，按钮设计可以参照《标签页面弹出》</td>
            </tr>
        	<tr>
				<td class="leftTipArea"><a href="#2010" onclick="popUp(0);" id="normal">HTML内容弹出</a></td>
                <td class="leftTipArea"><a href="#2010" onclick="popUp(1);" id="link">HTML页面内容</a></td>
                <td class="leftTipArea"><a href="#2010" onclick="popUp(2);" id="table">表格查询页面弹出</a></td>
                <td class="leftTipArea"><a href="#2010" onclick="popUp(3);" id="tab">标签页页面弹出</a></td>
            <tr/>
            <tr>
            	<td colspan="4">
                	<div class="titleDiv">
                        <table width="100%" cellpadding="0" cellspacing="0" border="0" style="text-align:left;">
                            <tr>
                                <td class="box_top_left">&nbsp;</td>
                                <td class="box_top_center">框示例</td>
                                <td class="box_top_right">&nbsp;</td>
                            </tr>
                        </table>
                     </div>
                    <div class="borderLeftRightBox">
                	<div style="padding:5px;padding-top:10px;padding-left:15px;">
                        <!-- 流程图 -->
                        <div id="proImg" style=" margin:0px; padding:0px; padding-left:3px;">
                            <!-- 审前准备 -->
                            <div id="pre">
                                <a href="#"><span class="imgbox"><div class="imgdiv"><span class="imgspancur">1</span></div><div class="imgtextcur">预先申请</div></span></a>
                                <span class="sep"><div class="sepimg"></div></span>
                                <a href="#"><span class="imgbox"><div class="imgdiv"><span class="imgspan">2</span></div><div class="imgtext">正式申请</div></span></a>
                                <span class="sep"><div class="sepimg"></div></span>
                                <a href="#"><span class="imgbox"><div class="imgdiv"><span class="imgspan_noRight">3</span></div><div class="imgtext_noRight">文件审查</div></span></a>
                                <span class="sep"><div class="sepimg"></div></span>
                                <a href="#"><span class="imgbox"><div class="imgdiv"><span class="imgspan_noRight">4</span></div><div class="imgtext_noRight">演示验证</div></span></a>
                                <span class="sep"><div class="sepimg"></div></span>
                                <a href="#"><span class="imgbox"><div class="imgdiv"><span class="imgspan_noRight">5</span></div><div class="imgtext_noRight">行政职能</div></span></a>
                            </div>
                        </div>
					</div>
                    </div>
                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td class="box_bottom_left">&nbsp;</td>
                            <td class="box_bottom_center">&nbsp;</td>
                            <td class="box_bottom_right">&nbsp;</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    <div class="buttonArea">
    	<a href="#2010" class="imgButton"><span>按钮区域</span></a>
    </div>
</div>
</body>
</html>